import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,Radio,List,Icon  } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import { Row, Col,Select,} from 'antd';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import localeData from '../../../public/lang/data.json';
const RadioItem = Radio.RadioItem;
const alert = Modal.alert;
@connect(() => {
  return ({

  })
})
export default class Cash extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      modal1:false,
      value:-1,
      value2:-2,
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: localeData[localStorage.locale].cashTitle,
        path: location.pathname + location.search
      }
    });

  }
  onChange = (value) => {
    console.log('checkbox');
    this.setState({
      value,
      value2:-2
    });
  };
  onChange2=(value)=>{
    this.setState({
      value2:value,
      value:-1
    });
  }
  confirmPay=()=>{
    let { dispatch, location } = this.props;
    let {value2,value}=this.state;
    if(value2=='1'){
      dispatch({
        type: "form/query",
        payload: {
          apiInfo: {
            url: "order/generateConfirmOrder",
            params: [
              {
                "key":"order_id",
                "value":localStorage.getItem("orderId")
              },
              {
                "key":"order_type",
                "value":2
              },
            ],
            _c: "app_pay_order"
          },
          callback: (result) => {
            let { code,data,msg } = result;
            console.log(data,code)
            if(code==10200){
              MToast.info(localeData[localStorage.locale].cash2,3, null, false);
              setTimeout(() => {
                if (browser.isInApp) {
                  Func.callHander(bridge, "openHomePage", {})
                }
                // else{
                //   this.props.history.replace("/");
                //   window.location.reload();
                // }
                goToPage({ dispatch, config: { url: "/shop_home" }, })
              }, 5000);

            }else if(code==10703){
              // MToast.info(msg,3, null, false);
            }else{
              // MToast.info(data.msg,3, null, false);
            }


            // goToPage({ dispatch, config: { url: data.approveLinks }, })
          }
        }
      })

    }else if(value=='0'){
      dispatch({
        type: "form/query",
        payload: {
          apiInfo: {
            url: "order/generateConfirmOrder",
            params: [
              {
                "key":"order_id",
                "value":localStorage.getItem("orderId")
              },
              {
                "key":"order_type",
                "value":1
              },
            ],
            _c: "app_pay_order"
          },
          callback: (result) => {
            let { code,data,msg } = result;
            console.log(data,code)
            if(code==10200){
                window.location.href=data.approveLinks

            }else if(code==10703){
              // MToast.info(msg,3, null, false);
            }else{
              // MToast.info(data.msg,3, null, false);
            }


            // goToPage({ dispatch, config: { url: data.approveLinks }, })
          }
        }
      })
    }else{
      MToast.info(localeData[localStorage.locale].cash3,3, null, false);
    }

  }
  handleBack=()=>{
    let { dispatch } = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/exec?_c=update_order_status",
          params: [
            {
              "key":"order_id",
              "value":localStorage.getItem("orderId")
            },
          ]
        },
        callback: (result) => {
          console.log(result)
          setTimeout(() => {
            if (browser.isInApp) {
              Func.callHander(bridge, "openHomePage", {})
            }
            // else{
            //   this.props.history.replace("/");
            //   window.location.reload();
            // }
            goToPage({ dispatch, config: { url: "/shop_home" }, })
          }, 1000);
        }
      }
    })
  }

  render(){
    let {dispatch} = this.props;
    let {modal1,value,value2} = this.state;
    const messages = localeData[localStorage.locale];
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    const data=[{value:0,image:'image/Paypal.png',label:'Paypal'}]
    const data2=[{value:1,image:'image/selfWay.png',label:'Paga al negozio'}]
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
        <div style={{height:"100%",position: 'relative',background:'#fff'}}>
          <div style={{position:'absolute',top:"9px",left:'15px',color:'#000',zIndex:'1000000'}}
             onClick={() =>
             alert(messages.cash1, messages.cash4, [
              { text: 'Cancel', onPress: () => console.log('cancel') },
               { text: 'Ok', onPress: () => this.handleBack() },
             ])
           }

          >
            <img src="image/arrow_left.png" width="25px"></img>

          </div>
       <Row style={{paddingTop:'60px'}}>
         <Col span={4}></Col>
         <Col span={16}><img src="image/cash.png" style={{width:'100%'}}/></Col>
         <Col span={4}></Col>
       </Row>
          <Row style={{paddingTop:'10px'}}>
            <Col span={4}></Col>
            <Col span={16} style={{fontSize:'30px',textAlign:'center',color:'#FF9F00',fontWeight:'bold'}}>€{Number(localStorage.getItem('total')).toFixed(2)}</Col>
            <Col span={4}></Col>
          </Row>

          <Row style={{paddingTop:'40px'}}>
            {localStorage.getItem("order_type")==0? <List style={{width:'100%',}}>

              {data.map(i => (
                <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                  <img src={i.image} style={{width:'72px',height:'40px'}}/><span style={{marginLeft:'10px'}}>{i.label}</span>
                </RadioItem>
              ))}

            </List>:<List style={{width:'100%',}}>

              {data.map(i => (
                <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                  <img src={i.image} style={{width:'72px',height:'40px'}}/><span style={{marginLeft:'10px'}}>{i.label}</span>
                </RadioItem>
              ))}
              <div style={{border:'1px solid rgb(249, 246, 246)' }}></div>
              {data2.map(i => (
                <RadioItem key={i.value} checked={value2 === i.value} onChange={() => this.onChange2(i.value)}>
                  <img src={i.image} style={{width:'34px',height:'40px'}}/><span style={{marginLeft:'10px'}}>{i.label}</span>
                </RadioItem>
              ))}
            </List>}

          </Row>
          <Row style={{margin:'25% 0 0 2%'}}>
            <Col span={24} style={{textAlign:'center'}}>{messages.cashAgree1}<span style={{color:'#F09600'}} onClick={()=>{
              this.setState({
                modal1:true
              })
            }}>《&nbsp;{messages.cashAgree2}&nbsp;》</span></Col>
            {/*<Col span={8} onClick={()=>{*/}
              {/*this.setState({*/}
                {/*modal1:true*/}
              {/*})*/}
            {/*}}>{messages.cashAgree2}</Col>*/}
          </Row>
          <Row style={{position:'fixed',bottom:'0px',width:'100%'}}>
            <Button  type="primary" size="default" style={{ margin: "0 auto 20px",width:'80%',background:'#F09600',borderRadius:'20px',border:'0px',height:'42px',lineHeight:'42px' }} onClick={() => {this.confirmPay() }}>{T(messages.placeOrderSelfConfirm)}</Button>
          </Row>
        </div>
        <Modal
          visible={this.state.modal1}
          style={{width:'98%'}}
          transparent
          maskClosable={false}
          title={messages.cashAgree2}
          footer={[{ text: messages.myModelSure, onPress: () => { this.setState({
            modal1:false
          }) } }]}

        >
          <div style={{ height: 500, overflow: 'scroll',textAlign:'left' }}>
            &nbsp;&nbsp;&nbsp;&nbsp;{messages.cashAgree3}<br />
            &nbsp;&nbsp;&nbsp;&nbsp;{messages.cashAgree4}<br />
            &nbsp;&nbsp;&nbsp;&nbsp;{messages.cashAgree5}<br />
            &nbsp;&nbsp;&nbsp;&nbsp;{messages.cashAgree6}<br />
            {messages.cashAgree7}<br />
            {messages.cashAgree8}<br />
          </div>
        </Modal>
      </IntlProvider>
    )
  }
}

